<template>
    <div>
        <!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
        <!-- 卡片视图区 -->
        <el-card>
            <!-- 添加分类按钮 -->
            <el-row>
				<el-col :span="4"><el-button type="primary" @click="showAddCateDialog">添加分类</el-button></el-col>
			</el-row>
            <!-- 商品分类区域 -->
            <tree-table class="treeTbale" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true" border >
                <!-- 是否有效 -->
                <template slot="isOK" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #0FD169;"></i>
                    <i class="el-icon-error" v-else style="color: red;"></i>
                </template>
                <!-- 排序 -->
                <template v-slot:order="scope" >
                    <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag size="mini" type="warning" v-else>三级</el-tag>
                </template>
                <!-- 操作 -->
                <template v-slot:operation="scope" >
                    <el-button type="primary" size="mini" @click="" icon="el-icon-edit" @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>
            <!-- 商品分类 分页区域 -->
            <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="QueryInfo.pagenum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="QueryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
        </el-card>
        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
            <!-- 内容主体区域 -->
			<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
				<el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
				<el-form-item label="父级分类：">
                    <!-- props用来指定配置对象 -->
                    <el-cascader expand-trigger="hover"
                    v-model="selectedKeys"
                    :options="parentCateList"
                    :props="cascaderProps"
                    clearable 
                    @change="parentCateChanged"></el-cascader>
                </el-form-item>
			</el-form>
            <div slot="footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑分类对话框 -->
        <el-dialog title="编辑分类" :visible.sync="editCateDialogVisible" width="50%" @close="">
            <!-- 内容主体区域 -->
            <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px">
				<el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>
			</el-form>
            <div slot="footer">
                <el-button @click="editCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCateEvent">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 商品分类请求参数
            QueryInfo:{
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            // 商品分类
			catelist: [],
            // 分类数量
			total: 0,
            // 为table指定列的含义
            columns:[
                {
                    label: '分类名称', 
                    prop: 'cat_name'
                },
                {
                    label: '是否有效', 
                    // 表示将 当前列定义为模板
                    type: 'template',
                    // 当前列定义为模板的名称
                    template: 'isOK'
                },
                {
                    label: '排序', 
                    type: 'template',
                    template: 'order'
                },
                {
                    label: '操作', 
                    type: 'template',
                    template: 'operation',
                    width: '200px'
                },
            ],
            // 控制添加分类对话框的现隐
            addCateDialogVisible: false,
            // 添加分类的表单数据对象
            addCateForm:{
                // 分类父 ID
                cat_pid: 0,
                // 将要添加的分类名称
                cat_name: '',
                // 分类层级
                cat_level: 0
            },
            // 分类表单的验证规则对象
            addCateFormRules:{
                cat_name: [
                    { required: true, message: '请输入分类名称!', trigger: 'blur' }, 
                ],
            },
            //父级分类的列表
            parentCateList:[], 
            // 指定级联选择器的配置对象
            cascaderProps:{
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                checkStrictly: true
            },
            // 选中父级分类的id数字
            selectedKeys:[],

            // 控制编辑分类对话框的现隐
            editCateDialogVisible: false,
            // 编辑分类的表单数据对象
            editCateForm:{},
            // 编辑分类的验证规则
            editCateFormRules:{
                cat_name: [
                    { required: true, message: '请输入分类名称!', trigger: 'blur' }, 
                ],
            }
        }
    },
    created(){
        this.getCateList();
    },
    methods:{
        // 获取商品分类
        async getCateList(){
            const { data:res } = await this.$http.get('categories', { params: this.QueryInfo })
            console.log(res.data);
            if(res.meta.status !== 200){
                this.$message.error({
                    showClose: true,
                    message: '获取商品分类失败！'
                })
            }
            // 把数据列表赋值给 catelist
            this.catelist = res.data.result;
            this.total = res.data.total
        },
        // 监听pagesize改变事件
		handleSizeChange(newSize) {
			this.QueryInfo.pagesize = newSize;
			this.getCateList();
		},
		// 监听页码值改变事件
		handleCurrentChange(newPage) {
			this.QueryInfo.pagenum = newPage;
			this.getCateList();
		},
        // 控制添加分类对话框的现隐
        showAddCateDialog(){
            // 先获取父级分类的数据列表，再展示对话框
            this.getParentCateList();
            this.addCateDialogVisible = true;
        },
        // 获取父级分类的数据列表
        async getParentCateList(){
            const { data:res } = await this.$http.get('categories', { params: {type:2} })
            if(res.meta.status !== 200){
                this.$message.error({
                    showClose: true,
                    message: '获取父级分类数据失败！'
                })
            }
            this.parentCateList = res.data;
        },
        // 选择器发生改变触发的函数
        parentCateChanged(){
            // 如果selectedKeys数组中的 length 大于 0，证明选中了父级分类
            // 反之，没有选中父级分类
            if(this.selectedKeys.length > 0){
                // 父级分类的id
                this.addCateForm.cat_pid =  this.selectedKeys[this.selectedKeys.length - 1];
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length;
                return;
            }else{
                // 父级分类的id
                this.addCateForm.cat_pid =  0;
                // 为当前分类的等级赋值
                this.addCateForm.cat_level = 0;
            }
        },
        // 关闭添加分类对话框 重置表单数据
        addCateDialogClosed(){
            this.$refs.addCateFormRef.resetFields();
            this.selectedKeys = [];
            this.addCateForm.cat_level = 0;
            this.addCateForm.cat_pid = 0
        },
        // 添加分类按钮事件
        addCate(){
            this.$refs.addCateFormRef.validate(async valid => {
                if (!valid) return
                const { data:res } = await this.$http.post('categories', this.addCateForm);
                if(res.meta.status !== 201){
                    this.$message.error({
                        showClose: true,
                        message: '添加分类失败！'
                    })
                }
                this.$message.success({
                    showClose: true,
                    message: '添加分类成功！'
                })
                this.getCateList();
                this.addCateDialogVisible = false;
            })
        },

        // 展示编辑分类的对话框
        async showEditCateDialog(id){
			const { data: res } = await this.$http.get(`categories/${id}`);
			if (res.meta.status !== 200) {
				this.$message.error({
					showClose: true,
					message: '查询分类信息失败！'
				});
			}
			this.editCateForm = res.data;
            this.editCateDialogVisible = true;
        },
        // 编辑分类事件
        editCateEvent(){
            this.$refs.editCateFormRef.validate(async valid => {
                if(!valid) return;
                // 发起编辑分类的请求
                const { data:res } = await this.$http.put('categories/' + this.editCateForm.cat_id, {cat_name: this.editCateForm.cat_name})
                if(res.meta.status !== 200){
                    this.$message.error({
                        showClose: true,
                        message: '修改分类失败！'
                    })
                }
                this.$message.success({
                    showClose: true,
                    message: '修改分类成功！'
                })
                this.getCateList();
                this.editCateDialogVisible = false;
            })
        },
        
        // 删除分类事件
        async removeCateById(id){
            const confirmResult = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示',{
                confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
            }).catch(err => err);
            if (confirmResult !== 'confirm') {
				return this.$message.info({
					showClose: true,
					message: '已取消删除！'
				});
			}
            // 发起删除请求
            const { data: res } = await this.$http.delete('categories/' + id);
            if (res.meta.status !== 200) {
				this.$message.error({
					showClose: true,
					message: '删除分类失败！'
				});
			}
            this.$message.success({
				showClose: true,
				message: '删除分类成功！'
			});
            this.getCateList();
        }
    }
}
</script>

<style lang="less" scoped>
.treeTbale{
    margin-top: 15px;
}
</style>